{% extends "base.html" %}

{% block custom_title %}
    {{ title }}
{% endblock custom_title %}

{% block site_content %}
    <section id="login" class="section">
        <div class="container">
            <div class="form-wrapper card mx-auto">
                <div class="card-body">
                    <h3 class="text-center primary-text-color">Welcome back!</h3>
                    <p class="text-center secondary-text-color">Login and explore Neural Style Transfer.</p>

                    <form id="login-form" method="post" action="">
                        {% csrf_token %}

                        <div class="form-group mb-0">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text pl-0">
                                    <i class="fa fa-user fa-fw"></i>
                                    </span>
                                </div>
                                <input type="text" name="username" class="form-control" placeholder="Enter Username" required>
                            </div>
                        </div>

                        <div class="form-group mb-0">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text pl-0">
                                    <i class="fa fa-key fa-fw"></i>
                                    </span>
                                </div>
                                <input type="password" name="password" class="form-control" placeholder="Enter Password" required>
                            </div>
                        </div>

                        {% if has_error %}
                            <div class="alert alert-danger mt-4">
                                <div class="alert-icon">
                                    <i class="fa fa-exclamation-triangle"></i>
                                </div>
                                <p class="mb-0">Your username and password didn't match. Please try again.</p>
                            </div>
                            <div class="mt-1 mb-3 text-center">
                        {% else %}
                            <div class="mt-5 mb-3 text-center">
                        {% endif %}
                                <input type="submit" value="Login" class="btn default-primary-color" />
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
{% endblock site_content %}